<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>团队详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 头部搜索 -->
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form label-width="80px">
            <el-form-item label="手机号：">
              <el-input
                v-model="queryinfo.userTel"
                clearable
                placeholder="请输入手机号"
                @clear="getmsgList"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5">
          <el-form label-width="80px">
            <el-form-item label="邮箱：">
              <el-input
                v-model="queryinfo.userEmail"
                clearable
                placeholder="请输入邮箱"
                @clear="getmsgList"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-button type="primary" icon="el-icon-search" @click="getmsgList"
          >搜索</el-button
        >
      </el-row>
      <!-- 数据列表 -->
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <el-table-column prop="userTel" label="手机号"> </el-table-column>
        <el-table-column prop="userEmail" label="邮箱"> </el-table-column>
        <el-table-column prop="levelName" label="用户等级"> </el-table-column>
        <el-table-column prop="superior" label="上级节点"> </el-table-column>
        <el-table-column prop="sumPeopleNum" label="总人数"> </el-table-column>
        <el-table-column prop="maxCount" label="最大层级"> </el-table-column>
        <el-table-column prop="sumToken" label="总业绩(U)"> </el-table-column>
        <!-- <el-table-column prop="sum" label="小区业绩之和(U)">
        </el-table-column>
        <el-table-column prop="max" label="大区业绩之和(U)">
        </el-table-column> -->
        <el-table-column label="团队详情">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              @click="lookInfo(scope.row.id)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- Table 团员详情 -->
    <el-dialog
      title="节点详情"
      :visible.sync="dialogTableVisible"
      @close="closeLower"
    >
      <el-row>
        <el-col :span="6">我的节点数:{{maxCount}}</el-col>
        <el-col :span="6">团队业绩T:{{sumToken}}</el-col>
      </el-row>
      <el-table :data="gridDatalist" :inline="true" border>
        <el-table-column property="id" label="ID"></el-table-column>
        <el-table-column property="tel" label="用户名"></el-table-column>
        <el-table-column property="maxCount" label="团员数"></el-table-column>
        <el-table-column property="sumToken" label="团队算力业绩（T）">
        </el-table-column>
        <el-table-column label="查看">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-view"
              :disabled="scope.row.maxCount == '0'"
              @click="lookInfo(scope.row.id)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryinfo: {
        userTel: "",
        userEmail:"",
        pageIndex: 1,
        pageSize: 10,
      },
      lookInfoQuery: {
        id: "",
        layer: 1,
        userId: "",
      },
      maxCount:"",
      sumToken:"",
      tableData: [],
      total: 0,
      dialogTableVisible: false,
      gridDatalist: [],
    };
  },
  created() {
    this.getmsgList();
  },
  methods: {
    // 关闭对话框重置参数数据
    closeLower() {
      this.lookInfoQuery.id = "";
      this.lookInfoQuery.layer = 1;
      this.lookInfoQuery.userId = "";
    },
    // 查看下级详情
    async lookInfo(id) {
      const ids={id}
      const { data: res } = await this.$http.post(
        "currencyAudit/findTeamDetails",
        this.httputil(ids)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      const list = new Array();
      const head = res.data.head;
      const sums = res.data.sums;
      const _params = {
        cj1: 1,
        head: head,
        sums: sums,
      };
      list[0] = _params;
      this.maxCount=res.data.maxCount,
      this.sumToken=res.data.sumToken,
      this.gridDatalist = res.data.list;
      this.dialogTableVisible = true;
      this.lookInfoQuery.layer++;
    },
    // 获取数据列表 /adminInterface/currencyAudit/listPagedB360node
    async getmsgList() {
      const { data: res } = await this.$http.post(
        "currencyAudit/listPagedB360node",
        this.httputil(this.queryinfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.tableData = res.data.list;
      this.total = res.data.count;
    },
    // 页面数量发生改变
    handleSizeChange(newSize) {
      this.queryinfo.pageSize = newSize;
      this.getmsgList();
    },
    // 页数发生改变
    handleCurrentChange(newCurrent) {
      this.queryinfo.pageIndex = newCurrent;
      this.getmsgList();
    },
  },
};
</script>
